<template>
  <div class="list base-flex base-columns">
    <a-alert class="base-mb15" type="warning" show-icon closable >
      <template #message>
        <span>1月16日（周二）凌晨 0：10 将进行系统稳定性演练，只为系统更强大！</span>
      </template>
    </a-alert>
    <div class="base-flex1 left-box">
        <div class="modal-header">{{ $t('self.dashboard.tips1') }}！</div>
        <div class="content-wrapper base-flex base-rows base-align-items-center">
          <div class="welcome">
            <a-typography-title :level="3">Hi，{{ $t('self.dashboard.tips2') }}【 {{ useUserStore.provider.realName }} 】</a-typography-title>
            <a-typography-title :level="4" class="t3">{{ $t('self.dashboard.tips3') }}：{{ currentTime }}</a-typography-title>
          </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
import { userStore } from '@/stores/userStore'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const route = useRoute()
const router = useRouter()
const useUserStore = userStore()

const currentTime = ref()
const welcomePic = ref()
const timerTask = ref(null) // 定时器任务

onMounted(() => {
  currentTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  welcomePic.value = $TOOL.getAssetsImages('dashboard/welcome.png')

  startTimer() // 开启定时器
})

// 页面离开
onBeforeRouteLeave((to, from, next) => {
  //清除多次执行定时器
  clearInterval(timerTask.value)

  setTimeout(() => {
    next()
  }, 200)

})

const startTimer = () => {
  timerTask.value = setInterval(() => {
    currentTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  }, 2000)
}

</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  padding: 15px;
  .left-box,
  .right-box {
    background: #ffffff;
    box-sizing: border-box;
    padding: 15px;
    height: 100%;
  }
  .left-box {
    //.pic {
    //  width: 50%;
    //  height: auto;
    //  margin-right: 2%;
    //}
    .t2 ,
    .t3 {
      font-weight: normal;
    }
  }
  .right-box {
    width: 29%;

  }
}
</style>
